<template>
  <div class="app-container">
    <!-- tankInfo -->
    <el-descriptions
      title="Tank Information"
      :border="true"
      class="custom-descriptions"
    >
      <el-descriptions-item label="ID">{{ tankInfo.id }}</el-descriptions-item>
      <el-descriptions-item label="产线编号">{{
        tankInfo.lineNo
      }}</el-descriptions-item>
      <el-descriptions-item label="罐号">{{
        tankInfo.tank
      }}</el-descriptions-item>
      <el-descriptions-item label="订单号">{{
        tankInfo.orderNo
      }}</el-descriptions-item>
      <el-descriptions-item label="订单状态">{{
        tankInfo.orderStatus === 1 ? "进行中" : "已完成"
      }}</el-descriptions-item>
      <el-descriptions-item label="罐重量">{{
        tankInfo.tankWeight
      }}</el-descriptions-item>
      <el-descriptions-item label="罐状态">{{
        tankInfo.tankState === 1 ? "正常" : "异常"
      }}</el-descriptions-item>
      <el-descriptions-item label="混合频率">{{
        tankInfo.mixFrequency
      }}</el-descriptions-item>
    </el-descriptions>

    <!-- pwsStatus -->
    <el-descriptions
      title="PWS Status"
      :border="true"
      class="custom-descriptions"
    >
      <el-descriptions-item label="ID">{{ pwsStatus.id }}</el-descriptions-item>
      <el-descriptions-item label="订单号">{{
        pwsStatus.orderNo
      }}</el-descriptions-item>
      <el-descriptions-item label="产线ID">{{
        pwsStatus.lineId
      }}</el-descriptions-item>
      <el-descriptions-item label="是否准备就绪">{{
        pwsStatus.isReady === 1 ? "是" : "否"
      }}</el-descriptions-item>
      <el-descriptions-item label="备料状态">{{
        pwsStatus.beiliaoStatus === 1 ? "已完成" : "未完成"
      }}</el-descriptions-item>
      <el-descriptions-item label="备料开始时间">{{
        pwsStatus.beiliaoStart
      }}</el-descriptions-item>
      <el-descriptions-item label="备料结束时间">{{
        pwsStatus.beiliaoEnd
      }}</el-descriptions-item>
      <el-descriptions-item label="预混状态">{{
        pwsStatus.premixStatus === 1 ? "已完成" : "未完成"
      }}</el-descriptions-item>
      <el-descriptions-item label="预混开始时间">{{
        pwsStatus.premixStart
      }}</el-descriptions-item>
      <el-descriptions-item label="预混结束时间">{{
        pwsStatus.premixEnd
      }}</el-descriptions-item>
      <el-descriptions-item label="后混状态">{{
        pwsStatus.aftermixStatus === 1 ? "已完成" : "未完成"
      }}</el-descriptions-item>
      <el-descriptions-item label="后混开始时间">{{
        pwsStatus.aftermixStart
      }}</el-descriptions-item>
      <el-descriptions-item label="后混结束时间">{{
        pwsStatus.aftermixEnd
      }}</el-descriptions-item>
      <el-descriptions-item label="调色状态">{{
        pwsStatus.tiaoseStatus === 1 ? "已完成" : "未完成"
      }}</el-descriptions-item>
      <el-descriptions-item label="调色开始时间">{{
        pwsStatus.tiaoseStart
      }}</el-descriptions-item>
      <el-descriptions-item label="调色结束时间">{{
        pwsStatus.tiaoseEnd
      }}</el-descriptions-item>
      <el-descriptions-item label="包装状态">{{
        pwsStatus.packStatus === 1 ? "已完成" : "未完成"
      }}</el-descriptions-item>
      <el-descriptions-item label="包装开始时间">{{
        pwsStatus.packStart
      }}</el-descriptions-item>
      <el-descriptions-item label="包装结束时间">{{
        pwsStatus.packEnd
      }}</el-descriptions-item>
      <el-descriptions-item label="质检状态">{{
        pwsStatus.qaStatus === 1 ? "已完成" : "未完成"
      }}</el-descriptions-item>
      <el-descriptions-item label="质检开始时间">{{
        pwsStatus.qaStart
      }}</el-descriptions-item>
      <el-descriptions-item label="质检结束时间">{{
        pwsStatus.qaEnd
      }}</el-descriptions-item>
      <el-descriptions-item label="复核状态">{{
        pwsStatus.fuheStatus === 1 ? "已完成" : "未完成"
      }}</el-descriptions-item>
      <el-descriptions-item label="复核时间">{{
        pwsStatus.fuheTime
      }}</el-descriptions-item>
    </el-descriptions>

    <!-- pwsTable -->
    <el-descriptions
      title="PWS Information"
      :border="true"
      class="custom-descriptions"
    >
      <el-descriptions-item label="ID">{{ pwsTable.id }}</el-descriptions-item>
      <el-descriptions-item label="订单号">{{
        pwsTable.orderNo
      }}</el-descriptions-item>
      <el-descriptions-item label="物料编号">{{
        pwsTable.matlNo
      }}</el-descriptions-item>
      <el-descriptions-item label="物料描述">{{
        pwsTable.matlDes
      }}</el-descriptions-item>
      <el-descriptions-item label="批次号">{{
        pwsTable.batchNo
      }}</el-descriptions-item>
      <el-descriptions-item label="BOM版本">{{
        pwsTable.bomAlt
      }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        pwsTable.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{
        pwsTable.endTime
      }}</el-descriptions-item>
      <el-descriptions-item label="上次批次日期">{{
        pwsTable.lastbatchDate
      }}</el-descriptions-item>
      <el-descriptions-item label="上次批次号">{{
        pwsTable.lastbatchNo
      }}</el-descriptions-item>
      <el-descriptions-item label="上次生产版本">{{
        pwsTable.lastprodVer
      }}</el-descriptions-item>
      <el-descriptions-item label="产线ID">{{
        pwsTable.lineId
      }}</el-descriptions-item>
      <el-descriptions-item label="订单结束日期">{{
        pwsTable.orderEndDate
      }}</el-descriptions-item>
      <el-descriptions-item label="订单开始日期">{{
        pwsTable.orderStartDate
      }}</el-descriptions-item>
      <el-descriptions-item label="订单类型">{{
        pwsTable.orderType
      }}</el-descriptions-item>
      <el-descriptions-item label="生产版本">{{
        pwsTable.productionVersion
      }}</el-descriptions-item>
      <el-descriptions-item label="数量">{{
        pwsTable.qty
      }}</el-descriptions-item>
      <el-descriptions-item label="配方编号">{{
        pwsTable.recipeNo
      }}</el-descriptions-item>
      <el-descriptions-item label="销售备注">{{
        pwsTable.salesNotes
      }}</el-descriptions-item>
      <el-descriptions-item label="特殊说明">{{
        pwsTable.specialInstruction
      }}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{
        pwsTable.startTime
      }}</el-descriptions-item>
      <el-descriptions-item label="罐号">{{
        pwsTable.tankNo
      }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{
        pwsTable.updateTime
      }}</el-descriptions-item>
      <el-descriptions-item label="操作人">{{
        pwsTable.workedBy
      }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { apigetTankAndPwsAndSapData } from "@/api/home";

const pwsStatus = ref({});
const pwsTable = ref({});
const sapDataList = ref({});
const tankInfo = ref({});

const lineno = ref();
const route = useRoute();
onMounted(() => {
  if (route.query.lineNo) {
    lineno.value = route.query.lineNo;
  }
  getfetchList(lineno.value);
});

// 渲染列表方法
const getfetchList = async (lineno) => {
  await apigetTankAndPwsAndSapData(lineno)
    .then((res) => {
      if (res.code == 200) {
        pwsStatus.value = res.data.pwsStatus;
        pwsTable.value = res.data.pwsTable;
        sapDataList.value = res.data.sapDataList;
        tankInfo.value = res.data.tankInfo;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};
</script>

<style scoped>
.custom-descriptions {
  margin-bottom: 20px;
}

.el-descriptions-item {
  font-size: 14px;
  color: #333;
}

.el-descriptions-item label {
  font-weight: bold;
  width: 150px;
  color: #666;
}

.el-descriptions {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 15px;
}
</style>
